<template>
  <div class="user-panel">
    <el-descriptions size="large" :column="1" border>
      <el-descriptions-item>
        <template #label>
          昵称
        </template>
        {{ gstore.nickname }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          账号
        </template>
        {{ gstore.account }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          角色
        </template>
        超级管理员
      </el-descriptions-item>
    </el-descriptions>
    <el-row class="app-margin-top-small" :gutter="15">
      <el-col :span="8">
        <el-button size="small" @click="UpdatedPassword" class="app-width-full" type="success">
          修改密码
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button size="small" @click="UpdatedData" class="app-width-full" type="primary">
          修改资料
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button size="small" @click="LogoutLogin" class="app-width-full" type="danger">
          退出登录
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import {defineAsyncComponent, h} from "vue"
import guardStore from "@/apps/admin/store/guard"
import store from "@/store/index"
import {usePopupComponent} from "@/components/FunctionComponents"
import bus from "@/units/bus";

const gstore = guardStore(store)


/**
 * 修改密码
 * @constructor
 */
const UpdatedPassword = () => usePopupComponent("修改密码", h(defineAsyncComponent(() => import("./UpdatedPassword.vue"))), '420px')


/**
 * 编辑个人资料
 * @constructor
 */
const UpdatedData = () => usePopupComponent("修改资料", h(defineAsyncComponent(() => import("./UpdatedData.vue"))), '420px')


/**
 * 退出登录
 * @constructor
 */
function LogoutLogin() {
  bus.emit('user-logout', undefined)
}
</script>
<style lang="scss" scoped>
.user-panel {
  :deep(.el-descriptions__label) {
    width: 65px;
  }
}
</style>